<template>
	<view class="top">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{
			paddingTop: statusBarHeight + 'px', 
			height: titleHeight + 'px',
			lineHeight: titleHeight + 'px',
		}" class="nav" @click="handleBack">
			<up-icon name="arrow-left"></up-icon>
			<view>健步走排行榜</view>
		</view>
		<!-- #endif -->
		
	</view>
	<view class="tabs-wrap">
		<up-tabs
			:current="current"
			:list="list1"
			:itemStyle="{ flex: 1, height: '50px' }"
			:activeStyle="{ color: '#ff4e4e', fontSize: '30rpx', fontWeight: 'bold' }"
			lineColor="#ff4e4e"
			@change="handleTabChange"
		></up-tabs>
		
		<view class="my-ranking" v-if="current !== 2">
			<view class="info">
				<view>我</view>
				<up-avatar shape="circle" :src="userRank.avatar || userAvatar"></up-avatar>
				<view class="name">{{userRank.realName}}</view>
				<view class="ranking">第{{userRank.ranks || 0}}名</view>
				<view>{{userRank.points}}积分</view>
			</view>
		</view>
		<view class="org-ranking-wrap" v-else>
			<view class="org-ranking">
				<view class="info">
					<view>我的单位</view>
					<view class="name">{{orgRank.shortenedName || orgRank.orgName}}</view>
				</view>
				<view class="divider"></view>
				<view class="info">
					<view>第{{orgRank.ranks}}名</view>
					<view class="name">{{orgRank.points}}积分</view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="info-list" v-if="current !== 2">
		<view class="info-header">
			<view class="seq">排名</view>
			<view class="user">用户</view>
			<view class="steps">积分</view>
		</view>
		<scroll-view scroll-y="true">
		<view class="info-item" v-for="(item, index) in rankData" :key="index">
			<view class="seq">
				<up-image v-if="item.ranks === 1" src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E6%8E%92%E8%A1%8C%E6%A6%9C/u23.png" width="40px" height="30px"></up-image>
				<up-image v-else-if="item.ranks === 2" src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E6%8E%92%E8%A1%8C%E6%A6%9C/u22.png" width="40px" height="30px"></up-image>
				<up-image v-else-if="item.ranks === 3" src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E6%8E%92%E8%A1%8C%E6%A6%9C/u24.png" width="40px" height="30px"></up-image>
				
				<view v-else>{{ item.ranks }}</view>
			</view>
			<view class="user">
				<up-avatar shape="circle" :src="item.avatar"></up-avatar>
				<view class="name-wrap">
					<view class="name">{{item.realName}}</view>
					<view class="org">{{item.shortenedName || item.orgName}}</view>
				</view>
			</view>
			<view class="steps-text">
				<view>集卡{{item.cardNumber}}张</view>
				<view>{{item.points}}分</view>
			</view>
		</view>
		</scroll-view>
		<up-empty mode="data" v-if="rankData.length == 0"></up-empty>
	</view>
	
	<view class="info-list" v-else>
		<view class="info-header">
			<view class="seq">排名</view>
			<view class="user">单位</view>
			<view class="steps">积分</view>
		</view>
		<scroll-view scroll-y="true">
		<view class="info-item" v-for="(item, index) in orgRankData" :key="index">
			<view class="seq">
				<up-image v-if="item.ranks === 1" src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E6%8E%92%E8%A1%8C%E6%A6%9C/u23.png" width="40px" height="30px"></up-image>
				<up-image v-else-if="item.ranks === 2" src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E6%8E%92%E8%A1%8C%E6%A6%9C/u22.png" width="40px" height="30px"></up-image>
				<up-image v-else-if="item.ranks === 3" src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E6%8E%92%E8%A1%8C%E6%A6%9C/u24.png" width="40px" height="30px"></up-image>
				<view v-else>{{ item.ranks }}</view>
			</view>
			<view class="user">
				{{item.shortenedName || item.orgName}}
			</view>
			<view class="steps-text">
				<view>集卡{{item.cardNumber}}张</view>
				<view>{{item.points}}分</view>
			</view>
		</view>
		</scroll-view>
		<up-empty mode="data" v-if="orgRankData.length == 0"></up-empty>
	</view>

</template>

<script>
	import { activityApi } from '@/api/activity/activity-app.js';
	
	export default {
		data() {
			return {
				bg: 'https://jqgh-public.yqfoodec.com/20250411/bg-2_64874.jpg',
				userAvatar: 'https://jqgh-public.yqfoodec.com/20250409/avatar_76231.png',
				titleHeight: 0,
				statusBarHeight: 0,
				current: 0,
				list1: [
					{ name: '个人排行榜' },  
					{ name: '今日排行榜' },  
					{ name: '单位排行榜' },
				],
				rankingParams: {
				  "activityId": 0,
				  "todayFlag": false
				},
				rankData: [],
				orgRankData: [],
				userInfo: {},
				userRank: {},
				orgRank: {}
			}
		},
		onLoad(options) {
			const id = options.id;
			this.rankingParams.activityId = id
			this.userInfo = uni.getStorageSync('userInfo')
			this.userInfo.points = 0
			this.getUserRankDetail(id)
			let titleHeight = 0
			const { statusBarHeight, system } = uni.getSystemInfoSync()
			
			if (system.indexOf('Android') > 0) {
				titleHeight = 48
			} else {
				titleHeight = 44
			}
			
			this.titleHeight = titleHeight
			this.statusBarHeight = statusBarHeight
		},
		methods: {
			handleTabChange(e) {
				this.current = e.index
				if (e.index !== 2) { // 个人
					this.rankingParams.todayFlag = e.index == 0?false:true
					this.getUserRankDetail(this.rankingParams.activityId)
				} else { // 单位
					this.getOrgRankDetail(this.rankingParams.activityId)
				}
			},
			handleBack() {
				uni.navigateBack()
			},
			async getUserRankDetail(id){
				this.userRank = this.userInfo
				const rankData = await activityApi.userRanking(this.rankingParams);
				this.rankData = rankData.data
				if (rankData.data.length > 0) {
					rankData.data.forEach(item => {
						if (this.userInfo.memberId == item.id) {
							this.userRank = item
						}
					})
				}
				
			},
			async getOrgRankDetail(id){
				this.orgRank = this.userInfo
				const rankData = await activityApi.orgRanking(id);
				this.orgRankData = rankData.data
				if (rankData.data.length > 0) {
					rankData.data.forEach(item => {
						if (this.userInfo.orgId == item.orgId) {
							this.orgRank = item
						}
					})
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/uni.scss';
	.top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 200px;
		background-image: url(https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E6%8E%92%E8%A1%8C%E6%A6%9C/u0.png);
		background-size: 100% 100%;
		z-index: 999999999;
		.nav {
			display: flex;
			color: #fff;
			padding-left: 5px;
			
			:deep(.u-iconfont) {
				color: #fff !important;
			}
		}
	}
	
	.tabs-wrap {
		position: fixed;
		top: 200px;
		left: 0;
		right: 0;
		height: 140px;
		background-color: #fff;
		z-index: 999999999;
		.org-ranking-wrap {
			padding: 30rpx;
		}
		
		.org-ranking {
			padding: 20rpx 0;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			border-radius: 20rpx;
			
			.divider {
				width: 1px;
				height: 20px;
				background-color: #999;
			}
			
			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				font-size: 32rpx;
				font-weight: bold;
				
				.name {
					padding-top: 10rpx;
					font-size: 28rpx;
					color:  $uni-text-color-grey;
				}
			}
		}
		
		
		.my-ranking {
			padding: 30rpx;
			.info {
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				// box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
				padding: 30rpx;
				border-radius: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				.ranking {
					flex: 1;
					text-align: center;
				}
				
				.u-avatar {
					padding: 0 20rpx;
				}
				
				.unlock {
					color: $uni-text-color-grey;
				}
				
				.count {
					text-align: right;
					color: $uni-color-primary;
				}
			}
			
		}
	}


	.info-list {
		margin-top: 330px;
		padding: 30rpx;
		z-index: 99;
		overflow: auto; /* 确保滚动行为只发生在 info-list 内部 */
		
		.info-header {
			font-weight: bold;
		}
		
		.info-header, .info-item {
			z-index: 0;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			padding: 20rpx 0;
			border-bottom: 1px solid #f5f5f5;
			
			.user {
				flex: 1;
				display: flex;
				align-items: center;
				
				.name-wrap {
					padding-left: 10rpx;
					font-size: 28rpx;
					
					.org {
						font-size: 24rpx;
						color: $uni-text-color-grey;
					}
				}
			}
			
			.seq {
				text-align: center;
				width: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: -99;
			}
			
			.steps {
				text-align: center;
				width: 160rpx;
			}
			
			.steps-text {
				color: #5A5A5A;
				font-size: 28rpx;
				text-align: center;
				width: 160rpx;
			}
		}
	}
	
</style>
